<template>
    <div class="group" :class="[className, `text-${horizontalPosition}`]">
        <a
            :href="link"
            class="inline-block items-center border-b pb-1 text-sm font-medium transition-opacity group-hover:opacity-70"
            :class="{ 'border-black': underline }"
        >
            {{ title }}
            <Icon
                icon="fa7-solid:arrow-right"
                class="ease ml-1 inline-block font-thin transition-all group-hover:translate-x-1"
            />
        </a>
    </div>
</template>

<script setup lang="ts">
import { Icon } from "@iconify/vue";

withDefaults(
    defineProps<{
        link: string;
        title: string;
        underline?: boolean;
        horizontalPosition?: "left" | "center" | "right";
        className?: string;
    }>(),
    {
        link: "list.html",
        title: "查看全部作品",
        underline: true,
        horizontalPosition: "center",
        className: "mt-16"
    }
);
</script>

<style scoped lang="scss"></style>
